<template>
  <div class="list">
    <Card>
      <Row>
        <Col span="8">
          <RadioGroup type="button" @on-change="onRadiochange" v-model="taskStatus">
            <Radio label="-1">全部</Radio>
            <Radio label="0">未开始</Radio>
            <Radio label="1">进行中</Radio>
            <Radio label="2">完成</Radio>
            <Radio label="3">失败</Radio>
          </RadioGroup>
        </Col>
        <Col span="8">
          <Input @on-search="getTaskList(1)" v-model="taskName" class="search" clearable search enter-button placeholder="搜索关键字" />
        </Col>
      </Row>
      <br>
      <div class="table_wrapper">
        <tables :loading="loading" :height="tableHeight" ref="tables" v-model="weixinTaskList" :columns="columns"/>
      </div>
      <br>
      <Page @on-change="getTaskList" @on-page-size-change="changePagesize" :current="current" :total="total" show-sizer :page-size="pageSize" />
    </Card>
  </div>
</template>

<script>
import './list.less'
import {mapState, mapMutations, mapActions} from 'vuex'
import Tables from '_c/tables'
export default {
  name: 'tables_page',
  components: {
    Tables
  },
  data () {
    return {
      button1: '',
      columns: [
        { title: 'Name', key: 'GongzhonghaoName', width: 100 },
        { title: 'Url', key: 'Url' },
        {
          title: '文章时间',
          key: 'daterange',
          render: (h, params) => {
            return params.row.DateStart && params.row.DateEnd && <span>{`${params.row.DateStart}=>${params.row.DateEnd}`}</span>
          }
        },
        {
          title: '状态',
          key: 'Status',
          width: 80,
          render: (h, params) => { return h('span', this.getStatusName(params.row.Status)) }},
        {
          title: '数量',
          key: 'Count'
        },
        {
          title: 'Handle',
          key: 'handle',
          width: 220,
          fixed: 'right',
          button: [
            (h, params, vm) => {
              return params.row.Status === 3 && h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.revertTask(params.row)
                          .then(res => {
                            if (res.result === 'success') {
                              this.$Message.success('恢复成功')
                              this.getTaskList()
                            } else {
                              this.$Message.error(res.msg || '恢复失败')
                            }
                          })
                          .catch(err => {
                            console.log(err)
                          })
                      }
                    }
                  },
                  '恢复任务'
                )
              ])
            },
            (h, params, vm) => {
              return params.row.Status === 0 && h(
                'Poptip',
                {
                  props: {
                    transfer: true,
                    confirm: true,
                    title: '确定开始任务?'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    'on-ok': () => {
                      console.log(params.row)
                      this.startTask(params.row).then(res => {
                        if (res.result === 'success') {
                          this.$Message.success('开始成功')
                          this.getTaskList()
                        } else {
                          this.$Message.error(res.msg || '操作失败')
                        }
                      }).catch(err => {
                        console.log(err)
                      })
                    }
                  }
                },
                [h('Button', '开始')]
              )
            },
            (h, params, vm) => {
              return params.row.Status !== 1 ? null : h(
                'Poptip',
                {
                  props: {
                    transfer: true,
                    confirm: true,
                    title: '确定停止任务?'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    'on-ok': () => {
                      console.log(params.row)
                      this.stopTask(params.row).then(res => {
                        if (res.result === 'success') {
                          this.$Message.success('停止成功')
                          this.getTaskList()
                        } else {
                          this.$Message.error(res.msg || '操作失败')
                        }
                      }).catch(err => {
                        console.log(err)
                      })
                    }
                  }
                },
                [h('Button', '停止')]
              )
            },
            (h, params, vm) => {
              return params.row.Status === 1 ? null : h(
                'Poptip',
                {
                  props: {
                    transfer: true,
                    confirm: true,
                    title: '确定删除任务?'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    'on-ok': () => {
                      this.delTask(params.row).then(res => {
                        if (res.result === 'success') {
                          this.$Message.success('删除成功')
                          this.getTaskList()
                        } else {
                          this.$Message.error(res.msg || '操作失败')
                        }
                      }).catch(err => {
                        console.log(err)
                      })
                    }
                  }
                },
                [h('Button', '删除')]
              )
            }
          ]
        }
      ],
      tableData: []
    }
  },
  methods: {
    ...mapActions([
      'getTaskList',
      'startTask',
      'stopTask',
      'delTask',
      'revertTask'
    ]),
    ...mapMutations([
      'setTaskName',
      'setTaskStatus',
      'changeTaskListPageSize'
    ]),
    changePagesize (pageSize) {
      this.changeTaskListPageSize(pageSize)
      this.getTaskList(1)
    },
    onRadiochange (key) {
      this.getTaskList(1)
    },
    getStatusName (status) {
      switch (status) {
        case 0:
          return '未开始'
        case 1:
          return '进行中'
        case 2:
          return '完成'
        case 3:
          return '失败'
        default:
          return '未知'
      }
    }
  },
  computed: {
    ...mapState({
      total: state => state.weixin.weixinTaskPage.total,
      current: state => state.weixin.weixinTaskPage.current,
      pageSize: state => state.weixin.weixinTaskPage.pageSize,
      loading: (state) => state.weixin.loading,
      weixinTaskList: (state) => { return state.weixin.weixinTaskList }
    }),
    taskStatus: {
      get () {
        return this.$store.state.weixin.weixinTaskPage.status
      },
      set (status) {
        this.setTaskStatus(status)
      }
    },
    taskName: {
      get () {
        return this.$store.state.weixin.weixinTaskPage.key
      },
      set (name) {
        this.setTaskName(name)
      }
    },
    tableHeight () {
      return document.documentElement.clientHeight - 300
    }
  },
  mounted () {
    this.getTaskList(1)
  }
}
</script>

<style>

</style>
